<template>
  <view class="wrapper">
    <view class="title">在此设置你的后端服务地址：</view>
    <view class="item">
      <text class="label">支付服务</text>
      <input v-model="serverConf.pay" class="input"/>
    </view>
    <view class="item">
      <text class="label">SSE服务</text>
      <input v-model="serverConf.sse" class="input"/>
    </view>
    <view class="item">
      <text class="label">其他服务</text>
      <input v-model="serverConf.other" class="input"/>
    </view>
    <button class="btn" @click="handleSave">保存</button>
    <view class="desc">保存成功后如不生效，请重启APP</view>
    <button class="btn btn__logout" @click="handleLogout">退出</button>
  </view>
</template>
<script setup>
import { computed } from "vue"
import { useStore } from "vuex"
import { ShowToast } from "../utils"

const $store = useStore()
let serverConf = computed({
  get: () => $store.state.serverConf,
  set(val) {
  }
})
const handleSave = () => {
  $store.commit('setServerConf', serverConf.value)
  ShowToast('保存成功')
  uni.redirectTo({ url: '/pages/index/index' })
}
const handleLogout = () => {
  $store.commit('setToken', '')
  uni.redirectTo({ url: '/pages/login' })
}
</script>
<style lang="scss" scoped>
.item, .title {
  margin: $uni-spacing-max 0;
}

.wrapper {
  margin: $uni-spacing-max;
}

.input {
  border: 1px solid $uni-border-color;
  height: 36rpx;
  margin-top: $uni-spacing-base;
}

.label {
  color: $uni-text-color;
  font-size: $uni-font-size-base;
}

.btn {
  background: $uni-color-primary;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-lg;
  margin-top: $uni-spacing-max;

  &::after {
    display: none;
  }

  &__logout {
    background: $uni-color-error;
  }
}

.desc {
  color: $uni-color-red;
  font-size: $uni-font-size-base;
  margin-top: $uni-spacing-max;
}
</style>
